<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分析生命周期</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root" :x="n">
        <h2 v-text="n"></h2>
        <h2>当前的n值是：{{n}}</h2>
        <button @click="add">点我n+1</button>
        <button @click="bye">点我销毁vm</button>
    </div>

</body>

<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        /**
         * 当没有指定el时，只会执行beforeCreate和created，后续不会再走了
         * 这时候，当调用了vm.$mount('#root')，发现后续的钩子函数都会走下去了
         **/
        el: '#root',
        /**
         * template里的内容直接替换掉<div id="root"></div>整个内容
         * template里一定要用<div></div>包住，否则会报错
         **/
        // template: ` 
        //     <div>
        //         <h2>当前的n值是：{{n}}</h2>
        //         <button @click="add">点我n+1</button>
        //     </div>        
        // `,
        data: {
            n: 1
        },
        methods: {
            /**
             * vm销毁掉之后，绑定的click事件的add方法还会生效，
             * 因为Vue给button绑定的click事件，最终都是以原生DOM
             * 事件绑定上去的
             **/
            add(){
                console.log('add');
                this.n++;
            },
            bye(){
                console.log('bye');
                this.$destroy()
            }
        },
        watch: {
            n(){
                console.log('n值变化了')
            }
        },
        beforeCreate() {
            /**
             * 无法通过vm访问到data中的数据、methods中的方法
             **/
            // vm中的data、methods都还未初始化
            console.log('beforeCreated');
            // 在每个钩子函数打印以下两行，观察控制台this的内容，beforeCreate观察是否有_data或add()
            // console.log(this)
            // debugger;
        },
        created(){
            /**
             *  可以通过vm访问到data中的数据、methods中配置的方法 
             **/
            // vm中的data、methods已经初始化了
            console.log('created')
            // console.log(this)
            // debugger;
        },
        beforeMount(){
            /**
             *  1.页面呈现的是未经编译的DOM结构 
             *  2.所有对DOM的操作，最终都不奏效
             **/
            // vue已经解析完成，但是还未将解析完成的DOM放入页面中
            console.log('beforeMount');
            // 这里debugger卡住之后，f12看DOM元素，发现里面都还是未解析的模板语法
            // 这里操作之后一瞬间有效，到Vue下一个初始化步骤时，就会被覆盖掉（虚拟DOM替换真实DOM）
            document.querySelector('h2').innerText='哈哈'
            // console.log(this)
            // debugger;
        },
        mounted(){
            /**
             *  1.页面中呈现的是经过Vue编译的DOM
             *  2.对DOM的操作均有效（尽可能避免） 。
             * 
             * 至此初始化过程结束，一般在此进行：开启定时器、
             * 发送网络请求、订阅消息、绑定自定义事件等初始化操作
             **/
            console.log('mounted');
            // this.$el是真实DOM
            // console.log('mounted',this.$el);
            // console.log('mounted',this.$el instanceof HTMLElement);
            // 该操作有效
            // document.querySelector('h2').innerText='哈哈'
            // console.log(this)
            // debugger;
        },
        beforeUpdate(){
            /**
             *  此时数据是新的，但页面是旧的
             *  即：页面尚未和数据保持同步
             **/
            // 点击button，就会触发beforeUpdate
            console.log('beforeUpdate');
            // console.log(this.n)
            // debugger
        },
        updated(){
            /**
             * 此时数据是最新的，页面也是新的
             * 即：页面和数据保持同步 
             **/
            // 点击button，就会触发updated
            console.log('updated');
            // console.log(this.n);
            // debugger;
        },
        beforeDestroy(){
            /**
             * vm中所有的data、methods、指令等等，
             * 都处于可用状态，马上要执行销毁过程，
             * 一般在次阶段：关闭定时器、取消订阅消息、
             * 解绑自定义事件等收尾操作
             **/
            console.log('beforeDestroy');
            // 能获取到变量的值
            // console.log(this.n);
            // 所有对数据的修改都不会再触发视图的更新
            // this.add();
            
        },
        destroyed(){
            console.log('destroyed');
        }
    })

</script>

</html>